// 选中轮播图元素
const Lb = document.getElementById("lunbo");
var num = 1;

// 定时器换图
setInterval(function (){
    // if else 的方式
    num++;
    if(num === 5){
        num = 1;
    }else if( num === 1){
        Lb.style.backgroundImage = 'url(./pic/p1.jpg)'
    }else if( num === 2){
        Lb.style.backgroundImage = 'url(./pic/p2.jpg)'
    }else if( num === 3){
        Lb.style.backgroundImage = 'url(./pic/p3.jpg)'
    }else if( num === 4){
        Lb.style.backgroundImage = 'url(./pic/p4.jpg)'
    }
}, 3000);

// 定义左右箭头变量
const left = document.getElementById("left");
const right = document.getElementById("right");

// 点击左箭头
left.onclick = function (){
    num--;
    if(num === 0){
        num = 4;
    }
    if( num === 1){
        Lb.style.backgroundImage = 'url(./pic/p1.jpg)'
    }else if( num === 2){
        Lb.style.backgroundImage = 'url(./pic/p2.jpg)'
    }else if( num === 3){
        Lb.style.backgroundImage = 'url(./pic/p3.jpg)'
    }else if( num === 4) {
        Lb.style.backgroundImage = 'url(./pic/p4.jpg)'
    }
}

// 点击右箭头
right.onclick = function (){
    num++;
    if(num === 5){
        num = 1;
    }
    if( num === 1){
        Lb.style.backgroundImage = 'url(./pic/p1.jpg)'
    }else if( num === 2){
        Lb.style.backgroundImage = 'url(./pic/p2.jpg)'
    }else if( num === 3){
        Lb.style.backgroundImage = 'url(./pic/p3.jpg)'
    }else if( num === 4) {
        Lb.style.backgroundImage = 'url(./pic/p4.jpg)'
    }
}


// 点击小圆点，实现跳转
var allli = document.getElementsByClassName("li2");

for( var i = 0; i < allli.length; i++){
    // 给每一个li元素赋值， 每次循环 i+1
    allli[i].index = i;
    allli[i].onclick = function (){
        var num = this.index;
        if( num === 0){
            Lb.style.backgroundImage = 'url(./pic/p1.jpg)'
        }else if( num === 1){
            Lb.style.backgroundImage = 'url(./pic/p2.jpg)'
        }else if( num === 2){
            Lb.style.backgroundImage = 'url(./pic/p3.jpg)'
        }else if( num === 3) {
            Lb.style.backgroundImage = 'url(./pic/p4.jpg)'
        }
    }
}